import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import Accordion from '../../components/Accordion/Accordion'
import SearchInput from '../../components/SearchInput/SearchInput'
import ProductItem from '../../components/ProductItem/ProductItem'
import request from '../utils/request'
import {guaranteeModes, style} from '../../config/index'
import {getBankImgUrl} from '../../config/getImgs'
import './product.scss'

export default class Product extends Component {

  constructor(props) {
    super(props);
    this.state = {
      showMask: false,
      showProduct: true,
      showFooter: false,
      isCollapsed: [false, false, false],
      selectedIndex: [0, 0, 0],
      products: [],
      pxfs: '',
      jrjg: '',
      loanUpper: '',
      guaranteeMode: '',
      term: '',
      loanTermLower: '',
      loanTermUpper: ''
    }
  }

  componentWillMount() {
    this.getProductList();
  }

  config = {
    navigationBarTitleText: '金融产品'
  }

  //单击下拉框
  accordionClick(index) {
    let status = this.state.isCollapsed[index];
    let isCollapsed = [false, false, false];
    isCollapsed[index] = !status;
    let showMask = false; //控制遮罩层
    let showProduct = true; //控制产品列表
    let showFooter = false; //控制底部按钮
    for (let i in isCollapsed) {
      if (isCollapsed[i]) {
        showMask = true;
      }
    }
    if(index == 1 && !status) {
      showMask = false,
      showProduct = false;
      showFooter = true;
      Taro.hideTabBar();  //隐藏底部的tabBar
    } else {
      Taro.showTabBar();
    }

    this.setState({
      isCollapsed,
      showProduct,
      showFooter,
      showMask
    })
  }

  //重置筛选条件
  reset() {
    this.setState({
      loanUpper: '',
      guaranteeMode: '',
      term: '',
      loanTermLower: '',
      loanTermUpper: '',
      selectedIndex: [0, 0, 0]
    })
  }

  //确定筛选条件
  sure() {
    this.accordionClick(1);
    this.getProductListByCondition();
  }

  //获取产品列表
  getProductList() {
    request.get('/loudi-poc/product/list').then((res) => {
      let products = res.data.data
      this.setState({
        products
      })
    })
  }

  //根据筛选条件获取产品列表
  getProductListByCondition() {
    let data = {
      jrjg: this.state.jrjg,
      loanUpper: this.state.loanUpper,
      guaranteeMode: this.state.guaranteeMode,
      term: this.state.term,
      pxfs: this.state.pxfs,
      loanTermLower: this.state.loanTermLower,
      loanTermUpper: this.state.loanTermUpper
    }
    // console.log(data);
    request.get('/loudi-poc/product/list', data).then((res) => {
      let products = res.data.data
      this.setState({
        products
      })
    })
  }

  //筛选产品
  onSelected1(index) {
    this.setState({
      pxfs: index
    }, function () {
      this.getProductListByCondition();
    })
  }

  onSelected2(data) {
    this.setState(data)
  }
  onSelected3(index) {
    this.setState({
      jrjg: index
    }, function () {
      this.getProductListByCondition();
    })
  }

  render() {
    let data1 = ['全部', '按利率', '按热门产品'];
    let data2 = [];
    let data3 = ['全部', '银行', '担保公司', '保险公司', '政府专项资金']
    let products = this.state.products;
    let productsView = products.map((item) =>  {
      return <ProductItem
        key={item.id}
        url={'/pages/product/details?id='+item.id}
        openType='navigate'
        src={getBankImgUrl(item.logoCode)}
        name={item.productName}
        productType={guaranteeModes[item.guaranteeMode]}
        rate={item.loanRateLower+'%~'+item.loanRateUpper+'%'}
        time={item.loanTermLower+'~'+item.loanTermUpper+'个月'}
        rateType='参考利率'
      />
    });
    return (
      <View className='container'>
        <View className='search_box'>
          <SearchInput />
        </View>
        <View className='filter'>
          <Accordion title='排序方式' isCollapsed={this.state.isCollapsed[0]} index='0' defaultIndex='0' value={data1} onClick={this.accordionClick.bind(this, 0)} onSelected={(index) => this.onSelected1(index)}>
          </Accordion>
          <Accordion title='产品筛选' isCollapsed={this.state.isCollapsed[1]} index='1' defaultIndex='1' value={data2} onClick={this.accordionClick.bind(this, 1)} selectedIndex={this.state.selectedIndex} onSelected={(data) => this.onSelected2(data)}>
          </Accordion>
          <Accordion title='金融机构' isCollapsed={this.state.isCollapsed[2]} index='2' defaultIndex='0' value={data3} onClick={this.accordionClick.bind(this, 2)} onSelected={(index) => this.onSelected3(index)}>
          </Accordion>
        </View>
        <View className='mask' style={this.state.showMask ? style.show : style.hide}></View>
        <View className='product' style={this.state.showProduct ? style.show : style.hide}>
          {productsView}
        </View>
        <View className='footer' style={this.state.showFooter ? style.show : style.hide}>
          <View className='footer-reset' onClick={this.reset.bind(this)}>
            <Image className='icon' src={require('../../images/product/reset_icon.png')} />
            <Text className='reset'>重置</Text>
          </View>
          <View className='footer-sure' onClick={this.sure}>确定</View>
        </View>
      </View>
    )
  }
}
